<template>
  <div class="main">
    <div class="class_type">
      <img src="@/assets/images/class_type.gif" alt="新闻中心" />
    </div>
    <div class="content">
      <ul class="class_date">
        <!-- 新闻主题链接区域 -->
        <li id="class_month">
          <a @click.prevent="selectTopic(0)">全部</a>
          <a href="" v-for="topic in topicList" :key="topic.tid" @click.prevent="selectTopic(topic.tid)">
            <b :class="searchTopic === topic.tid ? 'activeTopic':''">{{topic.tname}}</b>
          </a>
        </li>
      </ul>
      <ul class="classlist">
        <!-- 分页显示新闻区域 -->
        <template v-for="(news, index) in pageInfo.list">
          <template v-if="(index + 1) % 5">
            <li :key="news.nid">
              <router-link
                :to="{
                  name: 'ReadNews',
                  query: {
                    id: news.nid,
                  },
                }"
                >{{ news.ntitle }}</router-link
              >
              <span>{{ news.ncreatedate }}</span>
            </li>
          </template>
          <template v-else>
            <li :key="news.nid">
              <router-link
                :to="{
                  name: 'ReadNews',
                  query: {
                    id: news.nid,
                  },
                }"
                >{{ news.ntitle }}</router-link
              >
              <span>{{ news.ncreatedate }}</span>
            </li>
            <li class="space" :key="index"></li>
          </template>
        </template>
      </ul>
      <p v-if="pageInfo.total > 0" class="pagenav">
        <a href="" @click.prevent="nextPage('home')">首页</a>
        <a href="" @click.prevent="nextPage('prev')">上一页</a>
        <span>{{pageInfo.pageNum}}/{{pageInfo.pages}}</span>
        <a href="" @click.prevent="nextPage('next')">下一页</a>
        <a href="" @click.prevent="nextPage('end')">末页</a>
      </p>
      <p v-else><strong>暂无新闻</strong></p>
    </div>
    <index-right></index-right>
  </div>
</template>

<script>
import IndexRight from "./IndexRight.vue";
export default {
  name: "IndexMain",
  components: { IndexRight },
  data() {
    return {
      pageInfo: {},
      topicList:[],
      searchTopic:0
    };
  },
  created() {
    //获取新闻数据
    this.searchNews(1,25);
    //获取主题数据
    this.loadTopic();
  },
  methods: {
    searchNews(pageNum, pageSize) {
      this.$axios({
        url: "/api/newsByPage",
        params: {
          tid:this.searchTopic,
          pageNum,
          pageSize
        },
      }).then((rs) => {
        this.pageInfo = rs.data.data;
      });
    },
    loadTopic(){
      this.$axios({
        url:'/api/allTopic'
      }).then(rs=>{
        this.topicList = rs.data.data;
      })
    },
    selectTopic(tid){
      this.searchTopic = tid
      this.searchNews(1,25)
    },
    nextPage(key){
      let pageNum = 1
      switch (key) {
        case 'prev':
          if(this.pageInfo.hasPreviousPage){
            pageNum = this.pageInfo.prePage
          }
          break;
        case 'next':
          if(this.pageInfo.hasNextPage){
            pageNum = this.pageInfo.nextPage
          }
          break;
        case 'end':
          pageNum = this.pageInfo.pages
          break;
      }
      this.searchNews(pageNum,25);
    }
  },
};
</script>

<style scoped>
.pagenav {
  text-align: center;
}
.pagenav > span {
  margin: 0rem 0.5rem;
}
.pagenav > a {
  margin: 0rem 0.25rem;
}
.activeTopic{
  color: red;
}
</style>